<template>
	<view>
		<view class="input_box" @click="search">
			<input type="text" placeholder="请输入内容 如:保洁" />
		</view>
		<view class="content1">
			<view class="cover"></view>
			<view class="content2">
				<image src="../../../static/img/telephone.png"
					style="width: 35px; height: 35px;border-radius: 17.5px;margin-right: 5px; background-color: #03b4ff;">
				</image>
				<view @click="call()">
					<text>服务热线</text><br>
					<text style="color: #808080; font-size:8px;">7*24小时服务</text>
				</view>
			</view>
			<view class="content2" @click="fristaid()">
				<image src="../../../static/img/sos.png"
					style="width: 40px; height: 40px;border-radius: 15px;margin-right: 5px;"></image>
				<view class="">
					<text style="color: #DD524D;">紧急救护</text><br>
					<text style="color: #808080; font-size:8px;">应急陪护随叫随到</text>
				</view>
			</view>
		</view>
		<view class="section1">
			<hr style="width: 95%;">
			<view class="section1-1">
				快捷服务
			</view>
		</view>
		<view style="margin-top: 20px;display: flex;flex-direction: row;flex-wrap: wrap;">
			<view v-for="(val,key) in listobj" :key="key">
				<view v-if="val.show==1" style="display: flex;flex-direction: column;width: 20vw;margin-top: 10px;align-items: center;">
					<image @click="getitem(val.id)" :src="val.url"
						style="width: 20px;height: 20px; border-radius: 15px; background-color: #007AFF;padding: 5px;">
					</image>
					<text style="margin-top: 5px;">{{val.name}}</text>
				</view>
			</view>

			<view  @click="setIcon()" style="display: flex;flex-direction: column;width: 20vw;margin-top: 10px;align-items: center;">
				<image src="../../../static/img/more.png"
					style="width: 16px;height: 16px; border-radius: 15px; background-color: #d8d8d8;padding: 8px;">
				</image>
				<text style="margin-top: 5px;">更多</text>
			</view>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="margin-top: 15px;
		height: 120px;
		">
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<image :src="item" style="width: 98%; margin-left: 1%; "></image>
			</swiper-item>
		</swiper>
		<view
			style="display: flex; flex-direction: row; justify-content: space-around; margin-top: 15rpx;margin-bottom: 20px;">
			<view class="content2" style="height: 40px;">
				<image src="../../../static/img/older.png"
					style="width: 30px; height: 30px;border-radius: 15px;margin-right: 5px;"></image>
				<view class="">
					<text>今日步数</text><br>
					<text style="color: #808080; font-size:8px; width: 45%;">实时</text>
				</view>
				<text style="font-size: 20px; font-weight: bold;margin-left: 10px;">1502</text>
			</view>
			<view class="content2" style="height: 40px; width: 45%;">
				<image src="../../../static/img/heartbeat.png"
					style="width: 24px; height: 24px;border-radius: 15px;margin-right: 5px;padding: 3px; background-color: #007AFF;">
				</image>
				<view class="">
					<text>健康监测</text><br>
					<text style="color: #808080; font-size:8px;">数据指标</text>
				</view>
			</view>
		</view>
		<view
			style="display: flex; flex-direction: row; justify-content: space-around; margin-top: 5px;margin-bottom: 10px;">
			<view @click="getartical"
				style="background-color: #aaffff; width: 48%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
				<text style="margin-left: -100px; font-size: 15px;padding-bottom: 10px;">急救知识</text>
				<image src="../../../static/img/medical.png" style="width: 55px; height: 55px;"></image>
			</view>
			<view style="width: 48%;">
				<view @click="getartical"
					style="width: 100%; background-color: #fff1e0;  display: flex; justify-content: space-between;align-items: center;">
					<text style="margin-left: 10px; font-size: 15px;">膳食营养</text>
					<image src="../../../static/img/food.png"
						style="width: 40px;height: 40px;margin-right: 20px; padding: 5px;"></image>
				</view>
				<view @click="getartical"
					style="width: 100%; background-color:#ffbbb5; margin-top: 5px; display: flex; justify-content: space-between;align-items: center;">
					<text style="margin-left: 10px; font-size: 15px;">健康快车</text>
					<image src="../../../static/img/running.png"
						style="width: 40px;height: 40px;margin-right: 20px; padding: 5px;"></image>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				listobj: [{
						id: 1,
						name: "理发",
						url: "../../../static/img/scissors.png",
						discribe: "按照残疾人需求，为残疾人上门理发。",
						show: 1
					},
					{
						id: 2,
						name: "助医",
						url: "../../../static/img/doctor.png",
						discribe: "陪同残疾人到医院就诊",
						show: 1
					},
					{
						id: 3,
						name: "洗涤",
						url: "../../../static/img/Dryclothes.png",
						discribe: "清洗残疾人衣物等",
						show: 1
					},
					{
						id: 4,
						name: "助浴",
						url: "../../../static/img/shower.png",
						discribe: "清洗残疾人衣物等",
						show: 1
					},
					{
						id: 5,
						name: "个人护理",
						url: "../../../static/img/tubiao_-.png",
						discribe: "助残疾人整理个人卫生",
						show: 1
					},
					{
						id: 6,
						name: "精神慰藉",
						url: "../../../static/img/ad.png",
						discribe: "助残疾人舒缓心情",
						show: 1

					},
					{
						id: 7,
						name: "康复训练",
						url: "../../../static/img/trin.png",
						discribe: "帮助残疾人进行康复",
						show: 1
					}
				],
				swipers: [
					"../../../static/img/u195.png",
					"../../../static/img/u196.png",
					"../../../static/img/u197.png",
					"../../../static/img/u198.png",
				]

			}
		},
		methods: {
			call() {
				// 导入Activity、Intent类  
				var Intent = plus.android.importClass("android.content.Intent");
				var Uri = plus.android.importClass("android.net.Uri");
				// 获取主Activity对象的实例  
				var main = plus.android.runtimeMainActivity();
				// 创建Intent  
				var uri = Uri.parse("tel:15208437344"); // 这里可修改电话号码  
				var call = new Intent("android.intent.action.CALL", uri);
				// 调用startActivity方法拨打电话  
				main.startActivity(call);
				// ...  
			},
			fristaid() {
				uni.navigateTo({
					url: "../help/help"
				})
			},
			search() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			setIcon() {
				console.log(12)
				uni.navigateTo({
					url: `../serveinfo/serveinfo`
				})

			},
			getitem: function(id) {

				console.log(id)

				uni.navigateTo({
					url: '../serviceInfo/serviceInfo?id='+id
				})
			},
			getartical(e) {
				uni.navigateTo({
					url: `../info/info`
				})
			}
		},
		onShow() {
			uni.getStorage({
				key: 'storage_icondata',
				success: (res)=> {
					console.log(res.data);
					
						this.listobj = res.data
					

				}
			});
		},
	
		
	}
</script>

<style>
	* {
		font-size: 10px;
	}

	.input_box {
		height: 30px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10px;
		background-color: #007AFF;
		padding-bottom: 15px;
	}

	input {
		width: 88%;
		height: 20px;
		background: url(../../../static/search.png) no-repeat;
		background-position: 3px;
		background-size: 20px 20px;
		padding: 5px 0px 5px 30px;
		border-radius: 5px;
		background-color: white;
		outline: none;

	}

	.content1 {
		height: 80px;
		position: relative;
		display: flex;
		justify-content: space-around;
	}

	.content2 {
		display: flex;
		padding: 6px;
		height: 50px;
		width: 38%;
		flex-direction: row;
		align-items: center;
		padding-left: 20px;
		background-color: white;
		border-radius: 5px;
		box-shadow: #bfbfbf 0px 0px 1px 0px;
	}

	.cover {
		position: absolute;
		top: 0;
		right: 0;
		height: 50%;
		width: 100%;
		background-color: #007AFF;
		z-index: -2;
	}

	.section1 {
		position: absolute;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.section1-1 {
		position: absolute;
		background-color: white;
		padding: 5px;
		margin-top: -13px;
	}

	.section2 {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
	}

	.list_item {
		display: flex;
		width: 20%;
		height: 50px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	
	}
</style>
